<style lang="scss" scoped>
@import "../../css/pwd.scss";
.pwd {
  padding: 0.75rem 0.15rem 0.2rem;
}
.c000 {
  color: #000;
}
</style>

<template>
  <div class="pay_pwd full">
    <div class="forget_pwd full">
      <div class="main full flex-row">
        <div class="box1">
          <ul class="pwd flex-col cfff">
            <li class="box-center box1" :class="{c000:(hasRepeat ? repeatPwd[0] : changePwd[0] )}">*</li>
            <li class="box-center box1" v-for="i in 5" :key="i" :class="{c000:(hasRepeat ? repeatPwd[i] : changePwd[i] )}">*</li>
          </ul>
          <div class="box-center c82">
            {{cut_text}}
          </div>
        </div>

        <!-- <div class="box-center padding-tb10 bgfff">
                    <i class="iconfont icon-shouji"></i>
                </div> -->
        <ul class="number font-20 flex-parent bgfff">
          <li class="border-t border-l box1 box-center" v-for="i in 9" :key="i" @click="addPwd(i)">{{i}}</li>
          <li class="border-t border-l box1 box-center bge3"></li>
          <li class="border-t border-l box1 box-center" @click="addPwd('0')">0</li>
          <li class="border-t border-l box1 box-center bge3" @click="changePwd.pop()">
            <i class="iconfont icon-shanchushangwu103401 font-24"></i>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      has_pwd: 0, //0 = 第一次设置密码， 1 = 修改密码
      cut_text: "请设置智能屋支付密码，用于支付验证", // 请再次输入，确认密码
      changePwd: [], //第一次密码
      hasRepeat: false,
      repeatPwd: [] // 第二次密码
    };
  },
  mounted() {
    let that = this;
    this.$nextTick(() => {
      if (that.$route.query.id) {
        that.has_pwd = that.$route.query.id;
      }
    });
  },
  watch: {
    changePwd(val) {
      if (val.length === 6) {
        this.hasRepeat = true;
        this.cut_text = "请再次输入，确认密码";
        // this.getMoney(parseInt(val.join("")));
      }
    },
    repeatPwd(val) {
      if (val.length === 6) {
        if (parseInt(val.join("")) === parseInt(this.changePwd.join(""))) {
          this.setPay(parseInt(val.join("")));
        } else {
          // this.changePwd = [];
          this.repeatPwd = [];
          // this.hasRepeat = false;
          this.layer("两次密码不一样");
        }
      }
    }
  },
  methods: {
    cut_pwd() {
      this.forget_pwd = !this.forget_pwd;
    },
    // 设置修改密码
    setPay(num) {
      let that = this,
        ops = {
          payPassWord: num
        };
      if (this.has_pwd) {
        ops["code"] = that.$route.query.id;
      }
      this.http.post("user/updatePayPassWord", ops).then(res => {
        if (res.code === 0) {
          if (that.has_pwd) {
            that.layer("修改成功");
          } else {
            that.layer("设置成功");
          }
          that.back();
        }
      });
    },
    // 输入密码
    addPwd(num) {
      if (this.hasRepeat) {
        if (this.repeatPwd.length === 6) return;
        this.repeatPwd.push(num);
      } else {
        if (this.changePwd.length === 6) return;
        this.changePwd.push(num);
      }
    }
  }
};
</script>


